<template>
	<div class="iptSearch">
		<!-- 面包屑 -->
		<div class="mains">
			<div class="nav">
				<span>全部商品</span>
				<span class="arrow"> > </span>
				<span v-if="priceRange">
					<div class="priceRange" @click="handleX">{{ priceRange }} x</div>
					>
				</span>
				<span class="nav-concrete">{{
					keyword === "" ? "全部" : keyword
				}}</span>
			</div>
			<div class="newGoods">
				<div class="area">
					<div class="region">分类：</div>
					<div class="regionCategory">
						<span
							v-for="(cate, index) in indexData.cateList"
							:key="cate.id"
							to=""
							:class="regionIndex === index ? 'avtion' : ''"
							@click.prevent="changeIndex(1, index)"
						>
							{{ cate.name }}
						</span>
					</div>
				</div>
				<div class="area">
					<div class="Ranking">排序：</div>
					<div class="RankingCategory">
						<span
							:class="rankingIndex === 0 ? 'avtion' : ''"
							@click.prevent="changeIndex(3, 0)"
							@click="isrankingmode(0)"
							>默认</span
						>
						<span
							:class="rankingIndex === 1 ? 'avtion' : ''"
							@click.prevent="changeIndex(3, 1)"
							@click="isrankingmode"
						>
							价格
						</span>
						<div class="inpPrice">
							<span class="inpPriceSpan">
								<div class="inpPriceMoney">￥</div>
								<input
									class="inpPriceinp"
									type="text"
									v-model="minPrice"
									@click.stop="isShowHandle(true)"
								/>
							</span>
							-
							<span class="inpPriceSpan">
								<div class="inpPriceMoney">￥</div>
								<input
									class="inpPriceinp"
									type="text"
									v-model="maxPrice"
									@click.stop="isShowHandle(true)"
								/>
							</span>
							<button
								v-show="isShow"
								class="Pricebtn"
								@click="priceRangeHandle"
							>
								确定
							</button>
							<span v-show="isShow" class="Pricespan">取消</span>
						</div>
					</div>
				</div>
				<div class="assembly">
					<GoodList :goodList="dynamicLists" :joinCart="true" />
				</div>
				<div class="Pager">
					<Pagination
						:current-page="pageNo"
						:page-size="pageSize"
						:total="total"
						@current-change="handleCurrentChange"
						@size-change="handleSizeChange"
					/>
				</div>
			</div>
			<div class="like">
				<div class="Guessyou"><Recommend :newItemList="newItemList" /></div>
			</div>
		</div>
	</div>
</template>

<script>
import Pagination from "./components/Pagination.vue"
import GoodList from "./components/GoodList.vue"
import Recommend from "./components/recommend.vue"
import { reqGetSearchList, reqGetIndexData } from "@/api/index"
export default {
	components: {
		GoodList,
		Pagination,
		Recommend,
	},
	data() {
		return {
			// 总数量
			total: 0,
			// 分页
			pageNo: 1,
			pageSize: 4,
			// 最低价格
			minPrice: "",
			// 最高价格
			maxPrice: "",
			// 价格区间
			priceRange: "",
			// 分类
			regionIndex: -1,
			// 排序方式
			rankingIndex: 0,
			// 计算过后的商品
			dynamicList: [],
			// 保存当前数据
			itemList: [],
			// 第几项数据
			itemNumber: 0,
			// 猜你喜欢
			newItemList: [],
			// 搜索值
			keyword: "",
			// 数据
			indexData: [],
			// 判断排序方式
			rankingmode: 0,
			// 显示确定取消按钮
			isShow: false,
		}
	},
	watch: {
		keyword() {
			this.dynamicList = this.itemList
		},
		// rankingmode(rankingmode) {
		// 	if (rankingmode) {
		// 		this.dynamicList.sort((a, b) => {
		// 			// console.log(a.retailPrice, b.retailPrice)
		// 			return a.retailPrice - b.retailPrice
		// 		})
		// 	} else {
		// 		this.dynamicList.sort((b, a) => {
		// 			// console.log(a.retailPrice, b.retailPrice)
		// 			return a.retailPrice - b.retailPrice
		// 		})
		// 	}
		// },
	},
	computed: {
		dynamicLists() {
			const { rankingmode, dynamicList } = this
			if (rankingmode === 0) {
				return dynamicList
			}
			// console.log(rankingmode, dynamicList)
			let dynamicLists = dynamicList
			if (rankingmode) {
				dynamicLists.sort((a, b) => {
					// console.log(a.retailPrice, b.retailPrice)
					return a.retailPrice - b.retailPrice
				})
			} else {
				dynamicLists.sort((b, a) => {
					// console.log(a.retailPrice, b.retailPrice)
					return a.retailPrice - b.retailPrice
				})
			}
			return dynamicLists
		},
	},
	methods: {
		// 页数修改
		handleCurrentChange() {
			console.log(1)
		},
		handleSizeChange() {
			console.log(2)
		},
		// 清空选择的价格区间
		handleX() {
			this.priceRange = ""
			this.dynamicList = this.itemList
		},
		// 按钮显示隐藏
		async isShowHandle(show) {
			// await new Promise((res) => {
			// 	setTimeout(res, 300)
			// })
			// setTimeout(() => {
			// 	this.isShow = show
			// }, 3000)
			this.isShow = show
			// console.log(show)
		},
		// 显示价格区间 展示价格区间函数
		priceRangeHandle() {
			let { minPrice, maxPrice, itemList } = this
			if (!minPrice && !maxPrice) return
			if (maxPrice) {
				if (minPrice * 1 > maxPrice * 1) {
					this.minPrice = maxPrice
					this.maxPrice = minPrice
					;[maxPrice, minPrice] = [minPrice, maxPrice]
				}
			}
			if (minPrice * 1 && maxPrice * 1) {
				this.priceRange = `价格：${minPrice}-${maxPrice}`
				this.dynamicList = itemList.filter((item) => {
					if (
						item.retailPrice > minPrice * 1 &&
						item.retailPrice < maxPrice * 1
					) {
						return item
					}
				})
			} else if (minPrice) {
				this.priceRange = `价格：${minPrice}以上`
				this.dynamicList = itemList.filter((item) => {
					if (item.retailPrice > minPrice * 1) {
						return item
					}
				})
			} else if (maxPrice) {
				this.priceRange = `价格：0-${maxPrice}`
				this.dynamicList = itemList.filter((item) => {
					if (item.retailPrice < maxPrice * 1) {
						return item
					}
				})
			}
		},
		// 判断排序方式
		isrankingmode(num) {
			if (num === 0) {
				this.rankingmode = 0
				this.priceRangeHandle()
				return
			}
			this.rankingmode = !this.rankingmode
		},
		changeIndex(num, index) {
			const _this = this
			const cheange = {
				1() {
					_this.regionIndex = index
				},
				3() {
					_this.rankingIndex = index
				},
			}
			cheange[num] && cheange[num]()
		},
	},
	async mounted() {
		this.keyword = this.$route.query.keyword
		// console.log(this.$route)
		// window.addEventListener("Click", this.isShowHandle(false))
		const _this = this
		window.addEventListener("click", () => {
			// console.log(1, this)
			// this.$data.isShow = false
			_this.isShow = false
		})

		const [newItemList, result] = await Promise.all([
			reqGetIndexData(),
			reqGetSearchList(),
		])
		this.newItemList = newItemList.newItemList
		this.indexData = newItemList
		const results = []
		result.forEach((item) => {
			item.categoryItemList[0].itemList.slice(0, 7).forEach((item) => {
				results.push(item)
			})
		})

		// const goodList = result[this.itemNumber]
		// this.itemList = [...goodList.categoryItemList[0].itemList].slice(0, 7)
		// this.itemList = Object.freeze(results.slice(0, 21))
		this.itemList = results.slice(0, 21)
		// console.log(this.itemList)
		this.dynamicList = this.itemList
		this.total = this.itemList.length
	},
	beforeDestory() {
		const _this = this
		window.removeEventListener("click", () => {
			_this.isShow = false
		})
	},
}
</script>

<style lang="less" scoped>
.priceRange {
	display: inline-block;
	border: 1px solid #ccc;
	padding: 5px 8px;
	cursor: pointer;
}
.priceRange:hover {
	color: #cc9756;
}
.like {
	border-bottom: 1px solid #fff;
}
.Guessyou {
	width: 1090px;
	background: #fff;
	margin-bottom: 50px;
}
.Pager {
	padding-bottom: 40px;
}
.assembly {
	margin: 30px 0;
}
.inpPrice {
	display: inline-block;
	.inpPriceSpan {
		position: relative;
		display: inline-block;
	}
	.inpPriceMoney {
		position: absolute;
		color: #999;
		top: 5px;
		left: 2px;
	}
	.inpPriceinp {
		width: 47px;
		height: 24px;
		padding-left: 16px;
		outline: none;
	}
	.Pricebtn {
		color: #666;
		background: #f5f5f5;
		border: 1px solid #666;
		width: 60px;
		height: 26px;
		line-height: 24px;
		margin: 0 10px;
		cursor: pointer;
	}
	.Pricespan:hover {
		color: #b4a078;
		cursor: pointer;
	}
}
.iptSearch {
	width: 100%;
	background: #f5f5f5;
}
.mains {
	margin: 0 auto;
	width: 1090px;
	/* background: white; */
}
.nav {
	// width: 300px;
	height: 30px;
	font-size: 12px;
	color: #333;
	padding: 20px 0;
}
.area {
	display: flex;
	padding: 16px 20px;
	font-size: 14px;
	border-bottom: 1px #000 dotted;
}
.region {
	color: #999;
}
.Ranking {
	line-height: 28px;
	color: #999;
}
.regionCategory,
.RankingCategory {
	margin-left: 20px;
}
.regionCategory span:hover,
.RankingCategory span:hover {
	color: #b4a078;
	text-decoration: none;
}
.regionCategory span,
.RankingCategory span {
	margin-right: 20px;
}
.newGoods {
	background: #fff;
	margin-bottom: 30px;
}
.avtion {
	color: #b4a078;
}
</style>
